import React from "react";
import { Chart, Geom, Axis, Tooltip, Coord, } from "bizcharts";
import DataSet from "@antv/data-set";

class ApiCounts extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isShowMore: false
    }
  }

  changeShowMoreFlag = () => {
    const { isShowMore } = this.state;
    this.setState({ isShowMore: !isShowMore })
  }

  render() {
    const { data } = this.props;
    const { isShowMore } = this.state;

    return (
      <div>
        <div>
          <Chart height={data.length > 10 && isShowMore ? data.length * 40 : 400} data={data.length > 10 && isShowMore ? data : data.filter((item, index) => index < 11)} forceFit padding={['auto', 'auto', 'auto', 160]}>
            <Coord transpose />
            <Axis name="x" label={{ offset: 12 }} />
            <Axis name="y" />
            <Tooltip itemTpl='<li data-index={index}><span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>接口调用次数: {value}</li>' />
            <Geom type="interval" position="x*y" size={20} />
          </Chart>
        </div>
        {
          data.length > 10 && !isShowMore ? (
            <div style={{ textAlign: 'center', marginTop: 10, color: '#11CBFF', cursor: 'pointer' }} onClick={this.changeShowMoreFlag}>查看全部</div>
          ) : ''
        }
        {
          data.length > 10 && isShowMore ? (
            <div style={{ textAlign: 'center', marginTop: 10, color: '#11CBFF', cursor: 'pointer' }} onClick={this.changeShowMoreFlag}>收起</div>
          ) : ''
        }
      </div>
    );
  }
}

export default ApiCounts
